*{margin: 0;padding: 0;}
html,body{height: 100%;	border-bottom: solid 1px transparent;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;}
a{text-decoration:none;}
ul,li{list-style: none;}
.top{height: 8%;width: 100%;background: #04806f;display: flex;justify-content: space-between;}
.top>ul{display: flex;color:#ffffff;margin-top: 50px;margin-right: 12px;}
.top>ul>li>a{color:#ffffff;}
.top>ul>li{margin-right: 16px;}
.top>ul>li>span{margin:0 15px;width:1px;height: 14px;background:#ffffff;display: inline-block;}
.content{height: 92%;display: flex;position: relative;}
.left{background: #dadadd;padding: 70px 48px 0 90px;width: 11%;border-right:10px solid #d5d5d8; }
.left>ul>li{height: 66px;padding-left: 72px;line-height: 66px;font-size: 18px;color:#727272;margin-bottom: 20px;}
.left>ul>li:hover{color:#04806f;}
.basics{background-image: url(images/index2/btn1-normal.png);background-repeat: no-repeat;}
.basics:hover{background-image: url("images/index2/btn1-hover(clicked).png");background-repeat: no-repeat;}
.rule{background-image: url(images/index2/btn2-normal.png);background-repeat: no-repeat;}
.rule:hover{background-image: url("images/index2/btn2-hover(clicked).png");background-repeat: no-repeat;}
.start{background-image: url(images/index2/btn3-normal.png);background-repeat: no-repeat;}
.start:hover{background-image: url("images/index2/btn3-hover(clicked).png");background-repeat: no-repeat;}
.middle{width: 78%;padding-left: 40px;background: #fafafa}
.right{background: #dadadd;padding: 0px 64px 0 70px;width: 10%;border-left:10px solid #d5d5d8; position: relative;}
.mid-top{display: flex;justify-content:space-between;}
.mid-top-left{display: flex;margin-top: 30px;}
.mid-top-left>li:nth-child(1){margin-top: 2px;}
.mid-top-left>li:nth-child(2){font-size: 18px;color:#04806f;}
.mid-top-right{display: flex;margin-top: 28px;color:#ffffff;}
.mid-top-right>li:nth-child(1){width: 98px;height: 30px;border-radius: 5px;background: #4cb644;text-align: center;line-height: 30px;margin-right: 8px;}
.mid-top-right>li:nth-child(1):hover{background: #6dd265;cursor: pointer;}
.mid-top-right>li:nth-child(2){width: 176px;height: 30px;border-radius: 5px;background: #029b86;text-align: center;line-height: 30px;margin-right: 36px;}
.mid-top-right>li:nth-child(2):hover{background: #15b39d;cursor: pointer;}
.Lesson{display: flex;padding-bottom: 16px;border-bottom:1px solid #dcdcdc;margin-right: 38px;}
.Lesson-left{display: flex;background:#dadadd;height: 56px;width: 185px;font-size: 18px;color:#393939;line-height: 56px;margin-top: 32px;}
.Lesson-left>img{margin: 10px 25px;}
.Lesson-right{margin:48px 0 0 25px;}
.Lesson-right>p{font-size: 14px;color:#747474;}
.Lesson-right>ul{display: flex;font-size: 16px;color:#007061;}
.Lesson-right>ul>li{margin-right: 18px;}
.list{margin: 58px 0 0 5px;width:96%;}
.list ul{display: flex;}
.list ul>li{width: 6.25%;height: 44px;line-height: 44px;}
.list1>ul{border:1px solid #dcdcdc;}
.list2>ul{border:1px solid #dcdcdc;border-top:none;}
.list1>ul>li{background: #7f8289;color:#ffffff;font-size: 15px;border-right:1px solid #dcdcdc;text-align: center; }
.list1>ul>li:nth-child(16){border-right:none; }
.list2>ul>li{color:#4d4d4d;font-size: 13px;border-right:1px solid #dcdcdc;padding-left:10px;}
.list2>ul>li:nth-child(16){border-right:none; }
.right select{width: 174px;height: 30px;border:none;border-radius: 5px;position: absolute;top:25px;}
.right .right-btm>p:nth-child(1){color:#e3f3f1;font-size: 18px;background: #04806f;border-radius: 4px;height:50px;text-align: center;line-height: 50px;margin-bottom: 16px;width: 150px}
.right .right-btm>p:nth-child(1):hover{background: #0e9d89;}
.right .right-btm>p:nth-child(2){color:#e3f3f1;font-size: 18px;background: #1681c4;border-radius: 4px;height:50px;text-align: center;line-height: 50px;width: 150px}
.right .right-btm>p:nth-child(2):hover{background: #3498d7;}
.right .right-btm{position: absolute;bottom:55px;}
.add{padding-left: 74px;height: 64px;line-height: 64px;background: url("images/index2-1/btn-add-normal.png");background-repeat: no-repeat;margin: 18px 0 35px 20px;}
.add:hover{background: url("images/index2-1/btn-add-hover(clicked).png");background-repeat: no-repeat;cursor: pointer;}
.Course{display: flex;padding: 0 42px 0 20px;margin-bottom: 35px;}
.Course>div{width: 32%;height:290px;border: 1px solid #9b9da5;margin-right: 18px;border-radius:4px;}
.Course>div .Course-top{background:#9b9da5;font-size: 20px;color:#ffffff;height:50px;line-height: 50px;border-radius:4px 4px 0 0;display: flex;justify-content: center;}
.Course>div .Course-top>img{margin: 10px 10px 10px 0;}
.Course>div .Course-mibble>ul{margin: 36px 24px;}
.Course>div .Course-mibble>ul>li{display: flex;margin-bottom: 6px;color:#747e78;}
.Course>div .Course-mibble>ul>li>span{color:#000;}
.Course>div .Course-mibble>ul>li>p{margin-left: 46px;color:#000;}
.Course>div .Course-mibble .whether-n>p{color:#d65b00;}
.Course>div .Course-mibble .whether-y>img{width: 14px;height: 14px;margin:5px 5px 0 5px;}
.Course>div .Course-mibble .whether-y>p{color:#6fbe6f;}
.Course>div .Course-bottom>ul{display: flex;padding: 0 26px;}
.Course>div .Course-bottom>ul>li{text-align: center;height: 46px;line-height: 46px;border-radius: 2px;}
.Course>div .Course-bottom>ul>li:nth-child(1){width:205px;color:#ffffff;}
.Course>div .Course-bottom>ul>li:nth-child(2){width:128px;background: #f1f1f3;margin-left: 2px;}
.Course>div .Course-bottom>ul>li:nth-child(2):hover{background: #e7e7ec;cursor: pointer;}
.Course .un-class .Course-bottom>ul>li:nth-child(1){background: #6fbe6f;}
.Course .un-class .Course-bottom>ul>li:nth-child(1):hover{background: #81d781;cursor: pointer;}
.Course .class .Course-bottom>ul>li:nth-child(1){background: #35b882;}
.Course .class .Course-bottom>ul>li:nth-child(1):hover{background: #5ac89b;cursor: pointer;}
.content2{height: 100%;width: 100%;position: absolute;top:0;background:rgba(0,0,0,0.3);display: none;}
.uploads{width: 542px;height: 318px;background: #ffffff;position: absolute;top:0;left: 0;bottom:0;right:0;margin: auto;border-radius: 5px;}
.uploads>ul>li{display: flex;}
.uploads>ul>li:nth-child(1){height: 50px;background: #7f8289;line-height: 50px;color:#ffffff;border-radius: 5px 5px 0 0;font-size: 20px;position: relative;}
.uploads>ul>li:nth-child(1)>img:nth-child(1){margin: 10px 5px 10px 18px;}
.uploads>ul>li:nth-child(1)>div:nth-child(3){margin: 17px 0;width: 16px;height: 16px;background:url("images/index2/btn-closs-normal.png");background-repeat: no-repeat;position: absolute;right:5px;}
.uploads>ul>li:nth-child(1)>div:nth-child(3):hover{background: url("images/index2/btn-closs-hover(clicked).png");background-repeat: no-repeat;cursor: pointer;}
.uploads>ul>li:nth-child(2){height: 168px;margin-top: 30px;}
.uploads>ul>li:nth-child(2)>p{margin:65px 50px 0 20px;font-size: 14px;color:#6b6b6b;}
.uploads>ul>li:nth-child(2)>img{margin-left: 50px;}
.uploads>ul>li:nth-child(3){margin-left: 280px;margin-top: 15px;}
.uploads>ul>li:nth-child(3)>span{width: 120px;height: 36px;border-radius: 18px;font-size: 16px;text-align: center;line-height: 36px;}
.uploads>ul>li:nth-child(3)>span:nth-child(1){background: #51be91;color:#ffffff;margin-right: 5px;}
.uploads>ul>li:nth-child(3)>span:nth-child(1):hover{background: #23a594;cursor: pointer;}
.uploads>ul>li:nth-child(3)>span:nth-child(2){background: #e3e5e8;color:#7b7b7b;}
.uploads>ul>li:nth-child(3)>span:nth-child(2):hover{background: #d9dce1;cursor: pointer;}
.content2-1{height: 100%;width: 100%;position: absolute;top:0;background:rgba(0,0,0,0.3);display:none;}
.adds{width: 542px;height: 300px;background: #ffffff;position: absolute;top:0;left: 0;bottom:0;right:0;margin: auto;border-radius: 5px;}
.adds>ul>li{display: flex;}
.adds>ul>li:nth-child(1){height: 50px;background: #7f8289;line-height: 50px;color:#ffffff;border-radius: 5px 5px 0 0;font-size: 20px;position: relative;}
.adds>ul>li:nth-child(1)>img:nth-child(1){margin: 10px 5px 10px 18px;}
.adds>ul>li:nth-child(1)>div:nth-child(3){margin: 17px 0;width: 16px;height: 16px;background:url("images/index2/btn-closs-normal.png");background-repeat: no-repeat;position: absolute;right:5px;}
.adds>ul>li:nth-child(1)>div:nth-child(3):hover{background: url("images/index2/btn-closs-hover(clicked).png");background-repeat: no-repeat;cursor: pointer;}
.adds>ul>li:nth-child(2){margin: 66px 78px 0 68px;color:#099080;font-size: 16px;}
.adds>ul>li:nth-child(2)>p{margin-top: 8px;}
.adds>ul>li:nth-child(2)>span{display: inline-block;width: 8px;height:8px;background: #f48698;border-radius: 50%;margin:0 0 0 10px;}
.adds>ul>li:nth-child(2)>input{height: 26px;width: 336px;border-top: none;border-left: none;border-right: none;border-bottom: 1px solid #d7d8d9;margin-left: 10px;outline:none;color:#d7d8d9}
.adds>ul>li:nth-child(3){margin: 18px 0 66px 70px;color:#f48698;font-size: 14px;}
.adds>ul>li:nth-child(3)>p{margin-right: 8px;}
.adds>ul>li:nth-child(3)>span{display: inline-block;width: 8px;height:8px;background: #f48698;border-radius: 50%;margin: 6px 8px 0 8px;}
.adds>ul>li:nth-child(4)>p{margin-left: 23px;margin-right: 174px;line-height: 36px;font-size: 14px;color:#77b7a1;}
.adds>ul>li:nth-child(4)>p:hover{cursor: pointer;}
.adds>ul>li:nth-child(4)>p>span{width:6px;height:6px;background: #77b7a1;border-radius: 50%;display: inline-block;margin:0 2px 2px 0;}
.adds>ul>li:nth-child(4)>span{width: 120px;height: 36px;border-radius: 18px;font-size: 16px;text-align: center;line-height: 36px;}
.adds>ul>li:nth-child(4)>span:nth-child(2){background: #51be91;color:#ffffff;margin-right: 5px;}
.adds>ul>li:nth-child(4)>span:nth-child(2):hover{background: #23a594;cursor: pointer;}
.adds>ul>li:nth-child(4)>span:nth-child(3){background: #e3e5e8;color:#7b7b7b;}
.adds>ul>li:nth-child(4)>span:nth-child(3):hover{background: #d9dce1;cursor: pointer;}
.blackBox{width:130px ;height:70px ;background: rgba(0,0,0,0.4);border-radius: 8px;font-size: 14px;padding: 10px;margin: -52px 0 0 36px;z-index: 100;display: none;}
.blackBox>p:nth-child(1){color:#b8bbbd;}
.blackBox>p:nth-child(2){color:#64b191;}
